<template>
    <div class="blockitem">
        <router-link :to='{path:"/video/"+info.bvid}'>
            <div class="cover">
                <img :src="info.pic+'@480w_270h_1c'" alt="">
                <div class="shadow">
                    <block v-if='duration'>
                        <span class="iconfont icon-winfo-icon-bofang "> {{info.stat?(info.stat.view>10000?(info.stat.view/10000).toFixed(1)+'万':info.stat.view):(info.play>10000?((info.play/10000).toFixed(1)+'万'):info.play)}}</span>
                        <span class="iconfont icon-danmushu"> {{info.stat?(info.stat.danmaku>10000?(info.stat.danmaku/10000).toFixed(1)+'万':info.stat.danmaku):(info.video_review>10000?(info.video_review/10000).toFixed(1)+'万':info.video_review)}}</span>
                        <span class="duration">{{intToTime(info.duration)}}</span>
                    </block>
                    <block v-else>
                        <span class="iconfont icon-winfo-icon-bofang views"> {{info.stat?(info.stat.view>10000?(info.stat.view/10000).toFixed(1)+'万':info.stat.view):(info.play>10000?((info.play/10000).toFixed(1)+'万'):info.play)}}</span>
                        <span class="iconfont icon-danmushu comments"> {{info.stat?(info.stat.danmaku>10000?(info.stat.danmaku/10000).toFixed(1)+'万':info.stat.danmaku):(info.video_review>10000?(info.video_review/10000).toFixed(1)+'万':info.video_review)}}</span>
                    </block>
                    
                </div>
            </div>
            <p class="name">{{info.title}}</p>
        </router-link>
    </div>
</template>

<script>
export default {
    props:[
        'info',
        'duration'
    ],
    methods:{
        intToTime(d){
            var t=''
            var p=0
            var n=''
            if(d>=3600){
                p=parseInt(d/3600)
                t+=p+':'
                n=this.intToTime(d%3600)
                if(d%3600<600){
                    t+='0'
                }
                t+=n
            }
            else if(d>=60){
                p=parseInt(d/60)
                t+=p+':'
                n=this.intToTime(d%60)
                if(d%60<10){
                    t+='0'
                }
                t+=n
            }
            else{
                t+=d
            }
            return t
        }
    }

}
</script>

<style lang='less' scoped>
@import '../../assets/css/iconfont';
.blockitem{
    a{
        width: 14.4rem;
        height: 14.4rem * 27 /48 ;
        display: inline-block;
        .cover{
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
            img{
                width: 100%;
            }
            .shadow{
                position:absolute;
                width: 100%;
                background-image:linear-gradient(to top,black,transparent);
                background-color: transparent;
                bottom: 0;
                span{
                    color: white;
                    display: inline-block;
                    background-color: transparent;
                    padding: 0.6rem 0 0.5rem 0.6rem;
                    &::before{
                        font-size: 1.1rem;
                    }
                    font-size: 0.9rem;
                    &.duration{
                        float: right;
                        margin-right:0.6rem ;
                    }
                    &.views{
                        font-size: 1rem;
                        float: left;
                    }
                    &.comments{
                        font-size: 1rem;
                        float: right;
                        margin-right: 0.6rem;
                    }

                }
            }
        }
        .name{
            width: 100%;
            margin-top:0.5rem ;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            color: #333;
            margin-bottom: 1rem;
        }
    }
}
</style>